<template>
	<view class="all">
		<navbar :backgroung="'#cff0c8'" left-icon="" @updateHeight="updateNavbarHeight" />
		<view class="container">
			<view class="historytitle">History</view>
			<uni-icons @click="to_setting" class="gear" type="gear-filled" size="30"></uni-icons>
		</view>

		<view class="user">
			<image class="user-icon" src="../../static/resource/yumi-image/5.jpg" mode=""></image>
			<text v-if="!isEditing" class="nickname">{{ nickname }}</text>
			<input v-if="isEditing" class="nickname-input" v-model="nickname" @blur="toggleEdit"
				placeholder="Enter your nickname" />
			<uni-icons :type="iconType" size="30" @click="toggleEdit" class="icon"></uni-icons>
		</view>


		<view class="container1">
			<view class="grid-item" @click="to_his1">
				<image class="img" src="../../static/resource/yumi-image/10.jpg" mode="aspectFill"></image>
				<text class="title">Pollen Dispersal</text>
			</view>
			<view class="grid-item" @click="to_his2">
				<image class="img" src="../../static/resource/yumi-image/11.jpg" mode="aspectFill"></image>
				<text class="title">Dispersal Time</text>
			</view>
			<view class="grid-item" @click="to_his3">
				<image class="img" src="../../static/resource/yumi-image/8.jpg" mode="aspectFill"></image>
				<text class="title">Anther Emergence</text>
			</view>
			<view class="grid-item" @click="to_his4">
				<image class="img" src="../../static/resource/yumi-image/9.jpg" mode="aspectFill"></image>
				<text class="title">Seed Setting</text>
			</view>
			<view class="grid-item" @click="to_his5">
				<image class="img" src="../../static/resource/yumi-image/10.jpg" mode="aspectFill"></image>
				<text class="title">Ear Rot</text>
			</view>
			<view class="grid-item" @click="to_his6">
				<image class="img" src="../../static/resource/yumi-image/11.jpg" mode="aspectFill"></image>
				<text class="title">Stalk Rot</text>
			</view>
		</view>
		<button @click="toindex" class="toindex">Back to Home</button>
	</view>
</template>


<script setup>
	import {
		ref
	} from 'vue';

	const toindex = () => {
		uni.switchTab({
			url: '/pages/index/index'
		})
	}

	const navbarHeight = ref(0);
	// Callback to receive height from navbar
	const updateNavbarHeight = (height) => {
		navbarHeight.value = height;
	};

	var nickname = ref('');
	//获取用户昵称
	uni.getStorage({
		key: 'user-data',
		success: (res) => {
			const data1 = res.data;
			nickname.value = data1.name;
		}
	})

	// 定义编辑状态
	const isEditing = ref(false);
	const iconType = ref('compose'); // 初始图标为 "compose"
	// 切换编辑状态
	const toggleEdit = () => {
		if (isEditing.value) { // 只有在退出编辑状态时才发送请求
			if (nickname.value.trim() === '') {
				uni.showModal({
					title: 'Tip',
					content: 'The nickname cannot be empty',
					showCancel: false,
					confirmText: 'OK'
				})
				return; // 如果昵称为空, 则不继续执行  
			}
			updateNickname();
		}
		isEditing.value = !isEditing.value;
		iconType.value = isEditing.value ? 'checkmarkempty' : 'compose'; // 切换图标
	}

	const updateNickname = () => {
		uni.getStorage({
			key: 'user-data',
			success: (res) => {
				const data = res.data;
				uni.request({
					url: 'https://maize.ltd/yumi/rename',
					method: 'PUT',
					header: {
						'token': data.token
					},
					data: {
						"id": data.userId,
						"name": nickname.value,
					},
					success: (res) => {
						uni.setStorage({
							key: 'user-data',
							data: {
								...data,
								name: nickname.value
							}
						});
						console.log(res);
						uni.showModal({
							title: 'Tip',
							content: 'change successfully',
							showCancel: false,
							confirmText: 'OK'
						});
						// 在这里切换状态和图标  
						isEditing.value = false;
						iconType.value = 'compose'; // 切换回编辑图标  
					},
					fail: () => {
						uni.showModal({
							title: 'Tip',
							content: 'network error',
							showCancel: false,
							confirmText: 'OK'
						});
					}
				});
			},
			fail: () => {
				uni.showToast({
					title: '无法获取令牌',
					icon: 'error'
				});
			}
		});
	}


	const to_setting = () => {
		uni.navigateTo({
			url: '/pages/setting/setting'
		})
	}

	const to_his1 = () => {
		uni.navigateTo({
			url: '/pages/project1-history/project1-history'
		})
	}

	const to_his2 = () => {
		uni.navigateTo({
			url: '/pages/project2-history/project2-history'
		})
	}

	const to_his3 = () => {
		uni.navigateTo({
			url: '/pages/project3-history/project3-history'
		})
	}

	const to_his4 = () => {
		uni.navigateTo({
			url: '/pages/project4-history/project4-history'
		})
	}
	const to_his5 = () => {
		uni.navigateTo({
			url: '/pages/project5-history/project5-history'
		})
	}
	const to_his6 = () => {
		uni.navigateTo({
			url: '/pages/project6-history/project6-history'
		})
	}
</script>

<style lang="less" scoped>
	.all {
		height: 100%;
		overflow: hidden;
		background-color: #f5f5f5;
	}

	.toindex {
		margin: 10rpx;
		background-color: limegreen;
	}

	.user {

		display: flex;
		align-items: center;
		margin-left: 40rpx;


		.user-icon {
			margin-top: 30rpx;
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			margin-right: 10rpx;
			border: 2rpx solid #333;

		}
	}

	.nickname {
		font-size: 40rpx;
		color: #333;
		margin-right: 10rpx;
		margin-top: 20rpx;
		font-weight: bold;
	}

	.nickname-input {
		font-size: 28rpx;
		border: 1px solid #ccc;
		border-radius: 5rpx;
		padding: 5rpx;
		margin-right: 10rpx;
		margin-top: 20rpx;
		width: 270rpx;
	}

	.icon {
		margin-top: 20rpx;

	}

	.title {
		font-size: 40rpx;
		font-weight: bold;
		margin-top: 30rpx;
		color: #333;
		text-align: center;
	}

	.container1 {
		margin-top: 50rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 20rpx;

		.grid-item {
			width: 30%;
			margin-bottom: 30rpx;

			text-align: center;
			border: 1.5rpx solid #4a4a4a;
			border-radius: 10rpx;
			box-shadow: 4rpx 4rpx 10rpx rgba(0, 0, 0, 0.1);
			background-color: #f0f0f0;

			.img {
				width: 100%;
				height: 180rpx;
				/* 图片整体缩小 */
				object-fit: cover;
				border-radius: 10rpx 10rpx 0 0;
				border-bottom: 1.5rpx solid #4a4a4a;
			}

			.title {
				margin: 8rpx 0;
				/* 上下间距调整 */
				font-size: 24rpx;
				/* 字体大小调整 */
				font-weight: 400;
				color: #333;
				text-align: center;
				background-color: #f0f0f0;
			}

			.shouyezhanwei {
				height: 6rpx;
				/* 缩小占位高度 */
				border-radius: 0 0 10rpx 10rpx;
				background-color: #f0f0f0;
			}
		}
	}










	.container {
		margin-top: 100rpx;
		display: flex;
		position: relative;
		padding: 20rpx;
		background-color: #cff0c8;
		z-index: 2;
		border-bottom: 1rpx solid #000000;

		.historytitle {
			font-size: 40rpx;
			font-weight: bold;
			color: #333;
			text-align: center;
			width: 100%;
		}

		.gear {
			position: fixed;
			top: 20rpx;
			left: 20rpx;
			margin-top: 80rpx;
			background-color: #cff0c8;
			z-index: 1;

		}
	}
</style>